<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
    <style>
        a {
            cursor: pointer;
        }
    </style>
</head>

<body style="padding: 15px;">
    <!-- 添加图书的Panel面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
            </div>

            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>

            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
            </div>

            <button id="btnAdd" class="btn btn-primary">添加</button>


        </div>

        <!-- 图书的表格 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>

        <script>
            //+-*/=-()&^%$#@!~}{|""'':;?/
            $(function () {
                // 获取图书列表数据
                function getBookList() {
                    $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                        if (res.status !== 200) return alert('获取数据失败')

                        let arr = []
                        res.data.forEach((item) => {
                            arr.push(
                                `
                       <tr>
                    <td>${item.id}</td>
                    <td>${item.bookname}</td>
                    <td>${item.author}</td>
                    <td>${item.publisher}</td>
                    <td><a herf = ':javaseript' class = 'del' data-index=" ${item.id}">
                        删除</a></td>
                </tr>
                        `
                            )
                            $('#tb').html(arr.join(''))

                        })

                        // TODO: 获取图书列表，渲染到页面
                        // 实现步骤：
                        // 1. 下载好素材，找到对应页面
                        //   1. 接口查阅 接口文档
                        //   2. 关注请求的路径，请求方式，请求参数，响应结果
                        // 2. 利用$.get() 请求后台服务器，在回调函数里面接收结果
                        // 3. 根据返回状态码来判断是否成功请求到数据
                        // 4. 创建数组，用来存放行数据（rows）
                        // 5. 遍历服务器返回的数组，每遍历一次，利用数组（rows）去push  `<tr></tr>`
                        // 6. 每一行 tr 里面包含了 5 个 td 
                        //    `<tr><td>${内容1}</td><td>${内容1}</td><td>${内容1}</td><td>${内容1}</td><td>${内容1}</td></tr>`
                        // 7. 遍历循环完毕之后，找到内容容器，先清空当前内容（以免有重复数据），然后添加 rows
                    })
                }
                $('#tb').on('click', '.del', function () {

                    if (window.confirm('你真的要删除么')) {
                        let id = $(this).attr('data-index')
                        $.ajax({
                            type: 'get',
                            url: 'http://www.liulongbin.top:3006/api/delbook',
                            data: {
                                id
                            },
                            success: (res) => {
                                if (res.status !== 200) {
                                    return alert(res.msg)
                                }
                                getBookList()
                            }
                        })
                    }
                })

                $('#btnAdd').on('click', function () {
                    let bookname = $('#iptBookname').val().trim()
                    let author = $('#iptAuthor').val().trim()
                    let publisher = $('#iptPublisher').val().trim()
                    if (bookname.length <= 0 && author.length <= 0 && publisher.length <= 0) {
                        return alert('请添加完整的信息')
                    }
                    console.log(1);
                    $.ajax({
                        type: 'post',
                        url: 'http://www.liulongbin.top:3006/api/addbook',
                        data: {
                            id : '1',
                            bookname: bookname,
                            author: author,
                            publisher: publisher
                        },
                        success: function (res) {
                            if (res.status !== 201) return alert(res.msg)
                            getBookList()
                            $('#iptBookname').val('')
                            $('#iptAuthor').val('')
                            $('#iptPublisher').val('')
                        }
                    })
                })

                getBookList()
            })
        </script>

</body>

</html>